<template>
  <view class="order-list-container">

    <!-- 订单分类标签 -->
    <view class="tab-bar" style="margin-left: 20rpx;">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index" 
        :class="{ active: currentTab === tab.value }"
        @click="changeTab(tab.value)"
      >
        {{ tab.label }}
        <!-- 滑动指示条 -->
        <view 
          class="tab-indicator" 
          v-show="currentTab === tab.value" 
          :style="{ left: `${index * 0 + 43}%` }"
        ></view>
      </view>
    </view>

    <!-- 订单列表内容（带加载动画） -->
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="(order, index) in filteredOrders" 
        :key="index"
        :class="`slide-in-${index % 2 === 0 ? 'left' : 'right'}`"
      >
        <view class="order-card">
          <view class="order-image">
            <image 
              :src="order.image" 
              mode="aspectFill"
              lazy-load
            />
          </view>
          <view class="order-content">
            <text class="order-title">{{ order.title }}</text>
            <view class="price-info">
              <text class="main-price">￥{{ order.price }}</text>
              <text class="sub-text">×{{ order.quantity }}</text>
            </view>
          </view>
          <view class="order-status">
            <text class="status-text">{{ order.state }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态提示 -->
      <view v-if="filteredOrders.length === 0" class="empty-state">
        <text class="empty-text">暂无相关订单</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 订单数据
const orders = ref([
	{ id: 7, title: "裹蒸粽（蛋黄肉粽）", price: 32.00, quantity: 8, image: "https://img.alicdn.com/bao/uploaded/i1/2200667102488/O1CN01vVMHMt1UFYGH5MI4J_!!0-item_pic.jpg_500x500q90.jpg", state: "待付款" },
	{ id: 6, title: "经典裹蒸粽（豆沙粽）", price: 25.00, quantity: 1, image: "https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg", state: "待发货" },
	{ id: 3, title: "裹蒸粽（碱水粽）", price: 20.00, quantity: 4, image: "https://img.alicdn.com/i3/2206460867747/O1CN01UK4MiC276B2Xz85qJ_!!2206460867747.jpg", state: "待发货" },
	{ id: 8, title: "裹蒸粽（八宝粽）", price: 35.00, quantity: 12, image: "https://pic.nximg.cn/file/20220104/9852054_164240977100_2.jpg", state: "待发货" },
	{ id: 1, title: "经典裹蒸粽（豆沙粽）", price: 25.00, quantity: 1, image: "https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg", state: "已完成" },
	{ id: 2, title: "裹蒸粽（蛋黄肉粽）", price: 32.00, quantity: 2, image: "https://img.alicdn.com/bao/uploaded/i1/2200667102488/O1CN01vVMHMt1UFYGH5MI4J_!!0-item_pic.jpg_500x500q90.jpg", state: "已完成" },
	{ id: 4, title: "裹蒸粽（八宝粽）", price: 35.00, quantity: 1, image: "https://pic.nximg.cn/file/20220104/9852054_164240977100_2.jpg", state: "已完成" },
	{ id: 5, title: "裹蒸粽（碱水粽）", price: 20.00, quantity: 1, image: "https://img.alicdn.com/i3/2206460867747/O1CN01UK4MiC276B2Xz85qJ_!!2206460867747.jpg", state: "已完成" },
]);

// 标签配置
const tabs = ref([
  { label: "全部", value: "all" },
  { label: "待付款", value: "待付款" },
  { label: "待发货", value: "待发货" },
  { label: "已完成", value: "已完成" },
]);

// 当前选中标签
const currentTab = ref("all");

// 过滤后的订单列表
const filteredOrders = computed(() => {
  if (currentTab.value === "all") return orders.value;
  return orders.value.filter(order => order.state === currentTab.value);
});

// 标签切换处理
const changeTab = (tabValue: string) => {
  currentTab.value = tabValue;
};
</script>

<style scoped>
/* 全局样式 */
@import url('https://at.alicdn.com/t/font_3814770_ymb0w88u8mi.css'); /* 图标字体 */

.tab-bar {
  display: flex;
  background-color: white;
  margin-top: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
  margin-left: 20rpx;
  width: 95%;
}

.tab-item {
  flex: 1;
  padding: 50rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  text-align: center; 
}

.tab-item.active {
  color: #ff4500;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-20%);
  height: 4rpx;
  background-color: #ff4500;
  border-radius: 2rpx;
  transition: all 0.3s ease; 
  /* width: 25%; */
  min-width: 30rpx; 
}

.order-list-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部导航栏 */
.page-header {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: white;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.header-left {
  width: 40rpx;
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.icon-back {
  font-size: 40rpx;
  color: #666;
}

/* 标签栏 */
.tab-bar {
  display: flex;
  background-color: white;
  margin-top: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.tab-item {
  flex: 1;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  transition: all 0.3s;
}

.tab-item.active {
  color: #ff4500;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25%;
  height: 4rpx;
  background-color: #ff4500;
  border-radius: 2rpx;
  transition: left 0.3s;
}

/* 订单卡片 */
.order-item {
  margin: 20rpx;
  border-radius: 20rpx;
  background-color: white;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
  transform: translateY(50rpx);
  opacity: 0;
  transition: all 0.3s ease;
}

/* 入场动画 */
.slide-in-left { animation: slideInLeft 0.3s forwards; }
.slide-in-right { animation: slideInRight 0.3s forwards; }

@keyframes slideInLeft {
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
  to { transform: translateY(0); opacity: 1; }
}

.order-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.order-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.order-image image {
  width: 100%;
  height: 100%;
}

.order-content {
  flex: 1;
  margin-left: 20rpx;
}

.order-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.price-info {
  display: flex;
  align-items: center;
}

.main-price {
  font-size: 32rpx;
  color: #ff4500;
  font-weight: 500;
}

.sub-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.order-status {
  font-size: 28rpx;
  color: #666;
}

/* 空状态 */
.empty-state {
  padding: 200rpx 20rpx;
  text-align: center;
  color: #999;
}

.empty-text {
  font-size: 28rpx;
  margin-top: 20rpx;
}
</style>